<!-- 已有证书 -->
<template>
    <TitleInfo title="已有证书"></TitleInfo>
    <el-table :data="certificateInfoData" border style="width: 100%"  >
        <el-table-column prop="certificateName" label="证书名称" />
        <el-table-column prop="sendingTime" label="认证时间" />
        <el-table-column prop="certificateNo" label="证书编号" />
        <el-table-column prop="statusName" label="状态" />
        <el-table-column label="操作" width="80">
            <template #default="scope">
                <el-button size="small" v-if="scope.row.status==0" type="primary"  >
                    补办
                </el-button>
                <el-button size="small" v-if="scope.row.status==0" @click="logoutCertificate" type="primary"  >
                    注销
                </el-button>
                <!-- <el-button size="small" type="danger">
                    取消
                </el-button> -->
            </template>
        </el-table-column>
    </el-table>
 </template>
<script setup lang="ts">
import {certificateInfoApi,logoutCertificateApi} from "../../api/member/certificateInfo"
import type {CertificateInfoModel} from '../../api/member/certificateInfo'
const certificateInfoData=ref<CertificateInfoModel[]>([])
import TitleInfo from "../../components/TitleInfo.vue" 
 
 onMounted(()=>{
    loadData()
})

function loadData(){
    certificateInfoApi().then(res=>{
        certificateInfoData.value=res.data ? res.data : []
    })
}

async function logoutCertificate(id:any){
    const res=await logoutCertificateApi(id) 
    if(res.code==200){
        ElMessage.success(res.msg)
        loadData()
    }else{
        ElMessage.error(res.msg)
    }
}

</script>
<style scoped lang='less'>
:deep(thead .el-table .cell) {
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

:deep(thead tr th) {
    background: #345aa3 !important;
    ;
    color: #ffffff;
}

:deep(.el-table tr) {
    background-color: #f6f6f68c;
}

:deep(.el-table__body) {
    background-color: #f6f6f68c;
}
</style>